<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Studio</title>
<link href="./css/style.css" rel="stylesheet" type="text/css" />
<link href="./css/blog.css" rel="stylesheet" type="text/css" />
<link href="./css/jquery_dropdown_menu.css" rel="stylesheet" type="text/css" />

<script src="./javascript/jquery.js" type="text/javascript"></script>
<script src="./javascript/custom.js" type="text/javascript"></script>

<!-- Newsletter validation JavaScript Files -->
<script src="./javascript/jquery.formvalidation.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#newsletter").validate();
});
</script>

<!-- Cufon JavaScript Files -->
<script src="./javascript/cufon-yui.js" type="text/javascript"></script>
<script src="./javascript/kabel-font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1, h2, h3, h4, .quote')
</script>

<!-- Scroll JavaScript Files -->
<script src="./javascript/scroll.js" type="text/javascript"> </script>
<script type="text/javascript"> 
  $(document).ready(function(){ 
    $.localScroll(); 
  }); 
</script>

<meta charset="UTF-8"></head>

<body>

<div id="wrapper">

	<div id="header">
	
		<div class="logo"><a href="#"><img src="./images/logo.png" alt="logo" /></a></div>
	
			<div id="myslidemenu" class="jqueryslidemenu">
				<ul>
					<li><a href="./index.html">Home</a>
						<ul>
							<li><a href="./index.html">Slideshow</a></li>
							<li><a href="./index2.html">Slideshow - Curtain effect</a></li>
							<li><a href="./index3.html">Anything Slider</a></li>
						</ul><!--END ul index page-->
					</li>
					
					<li><a href="./about.html">About</a></li>
					
					<li><a href="#">Features</a>
						<ul>
							<li><a href="#">Index page &raquo;</a>
								<ul>
									<li><a href="./index.html">Slideshow</a></li>
									<li><a href="./index2.html">Slideshow - Curtain effect</a></li>
									<li><a href="./index3.html">Anything Slider</a></li>
								</ul><!--END ul index page-->
							</li>
							<li><a href="./about.html">About page</a></li>			
							<li><a href="./services.html">Services page</a></li>
							<li><a href="./portfolio.html">Portfolio - Grid view</a></li>
							<li><a href="./portfolio2.html">Portfolio - List view</a></li>
							<li><a href="./portfolio3.html">Portfolio - Thumb view</a></li>
							<li><a href="./blog.html">Blog page</a></li>
							<li><a href="./blog-single.html">Blog single page</a></li>
							<li><a href="./contact.html">Contact page</a></li>
						</ul><!--END ul features-->
					</li>
						
					<li><a href="./elements.html">Style</a>
						<ul>
							<li><a href="./elements.html">Elements page</a></li>			
							<li><a href="./full-width-page.html">Full width page</a></li>															
							<li><a href="#">Template's colors &raquo;</a>
								<ul>
									<li><a href="http://brankic1979.com/theme/Thestudio/dark/">Dark</a></li>
									<li><a href="./index.html">Grey</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/blue/">Blue</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/aquamarine/">Deep blue</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/red/">Red</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/green/">Green</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/yellow/">Yellow</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/orange/">Orange</a></li>
									<li><a href="http://brankic1979.com/theme/Thestudio/magenta/">Magenta</a></li>
								</ul><!--END ul template's colors-->
							</li>						
							<li><a href="#">Header &raquo;</a>
								<ul>
									<li><a href="./index.html">Twitter update</a></li>
									<li><a href="./blog-single.html">Breadcrumb pagination</a></li>
								</ul><!--END ul header-->
							</li>							
							<li><a href="#">Footer &raquo;</a>
								<ul>
									<li><a href="./about.html#footer">Style 1</a></li>
									<li><a href="./contact.html#footer">Style 2</a></li>
								</ul><!--END ul footer-->
							</li>
						</ul><!--END ul style-->
					</li>	
					
					<li><a href="./services.html" class="current">Services</a></li>
					
					<li><a href="./portfolio.html">Portfolio</a>	
						<ul>
							<li><a href="./portfolio.html">Portfolio - Grid view</a></li>
							<li><a href="./portfolio2.html">Portfolio - List view</a></li>
							<li><a href="./portfolio3.html">Portfolio - Thumb view</a></li>
						</ul><!--END ul portfolio-->						
					</li>
					
					<li><a href="./blog.html">Blog</a></li>
					
					<li><a href="./contact.html">Contact</a></li>
				</ul><!--END ul-->
			</div><!--END jqueryslidemenu-->
	
				<span class="quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
	
					<form id="search" name="search" method="post" action="#">
						<input name="s" type="text" id="s" value="Search the site" onblur="if (this.value == ''){this.value = 'Search the site'; }" onfocus="if (this.value == 'Search the site') {this.value = ''; }" />
						<input name="" type="image" src="./images/input-search-button.gif" class="search_button" />
					</form><!--END search-->
							
	</div><!--END header-->
	
	<div id="center_holder">
	<div class="twitter">Not sure why I'm still awake at 1AM. Might be due to the fact I'm receiving new emails every 2-5 minutes. <a href="#">about 21 hours ago</a>	
	<a href="#" class="follow-me toolTip"  title="Follow me on Twitter.">follow me</a>
	</div><!--END twitter-->
	</div><!--END twitter holder-->		
	
<div id="content">

	<div id="inner_content">			
							
	<span id='inner_content_top'></span>
	<span id='inner_content_bottom'></span>

		<div class="column-holder">
			<h1>Our services</h1>
			<strong>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</strong><br />

			
			<div class="one">
			<h3>Web design and development</h3><br />
			<img src="./images/glider1.png" width="70" height="60" alt="" />			
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna.</p>
			<a href="#" class="read-more">read more</a> 
			</div><!--END one_in_two-->
			
			<span class="divider"></span>
						
			<div class="one">
			<h3>Logo design and branding</h3><br />
			<img src="./images/glider2.png" width="60" height="60" alt="" />
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna.</p>
			<a href="#" class="read-more">read more</a> 
			</div><!--END one_in_two last-->
			
			<span class="divider"></span>
					
			<div class="one">
			<h3>Print design</h3><br />
			<img src="./images/glider3.png" width="70" height="60" alt="" />
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna.</p>
			<a href="#" class="read-more">read more</a> 
			</div><!--END one_in_two-->
			
			<span class="divider"></span>
						
			<div class="one">
			<h3>SEO optimization</h3><br />
			<img src="./images/glider4.png" width="60" height="60" alt="" />
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna.</p>
			<a href="#" class="read-more">read more</a> 
			</div><!--END one_in_two last-->			
				
		</div><!--END column holder-->
		
		<div class="column-holder"><br /><br />	
			<div class="one">
				<h2>One column with quotes</h2>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna, nemo enim ipsam voluptatem quia voluptas sit asperna.</p>
				
					<div class="quote-right">
						<span class="quote-desc">
						"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat nunc ut nibh inter dum tempus. Donec at lorem eget sapien iaculis porttitor id quis ligula." 
						</span>
						<div class="quote-author-right">John Doe - Project manager</div>
					</div><!--END quote-right--> 
					
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna.</p>
			</div><!--END one-->
		</div>

	</div><!--END inner_content-->

<div id="sidebar">

		<div class="block">
		<h2>Subpage navigation </h2>
			<ul>
				<li><a href="#">Three columns </a></li>
				<li><a href="#">Two columns - odd </a></li>
				<li><a href="#">Two columns - even </a></li>
				<li><a href="#">One column with quotes</a></li>
				<li><a href="#">One column with picture example</a></li>
				<li><a href="#">Pricing table</a></li>
			</ul>
		</div>
		

		<div id="testimonial-holder">	
				<h2>Testimonials</h2>
					<div class="sliderbutton"><img src="./images/arrow-down.gif" alt="Next" onclick="slideshow.move(1)" /></div>
					<div class="sliderbutton"><img src="./images/arrow-up.gif" alt="Previous" onclick="slideshow.move(-1)" /></div>
					
						<div id="testimonial">
							<ul>
								<li>
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat nunc ut nibh interdum tempus. Donec at lorem eget sapien iaculis porttitor id quis ligula. Duis non ante quis ligula vestibulum scelerisque id quis est. Cras aliquam justo eget elit aliquet quis iaculis felis venenatis.</p>
									<p class="author">John Doe<br/><a href="#">www.johndoewebsite.com</a></p>
								</li>
								<li>
									<p>Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu. Etiam eget mi enim, non ultricies nisi.Curabitur pharetra, ante ac suscipit suscipit, erat nisl faucibus justo, sed ornare sem erat interdum turpis.</p>
									<p class="author">Jane Doe Senior<br/><a href="#">www.janedoeseniorwebsite.com</a></p>
								</li>
								<li>
									<p>Etiam eget mi enim, non ultricies nisi. Curabitur pharetra, ante ac suscipit suscipit, erat nisl faucibus justo, sed ornare sem erat interdum turpis. Etiam blandit lacus quis elit convallis commodo sit amet in turpis. Nunc odio tortor, egestas at congue sed, volutpat venenatis erat.</p>
									<p class="author">Jane Doe Junior<br/><a href="#">www.janedoejuniorwebsite.com</a></p>
								</li>
								<li>
									<p>Etiam blandit lacus quis elit convallis commodo sit amet in turpis. Nunc odio tortor, egestas at congue sed, volutpat venenatis erat.</p>
									<p class="author">John Doe Junior<br/><a href="#">www.johndoejuniorwebsite.com</a></p>
								</li>
							</ul><!--END ul-->
						</div><!--END testimonials-->	
			</div><!--END testimonial holder-->	
			<script type="text/javascript" src="./javascript/testimonial.js"></script>
			<script type="text/javascript">
			var slideshow=new TINY.slider.slide('slideshow',{
				id:'testimonial',
				auto:3,
				resume:false,
				vertical:true,
				horizontal:false,
				position:0	
			});
			</script>
			
			
		
		<div class="advertise">
		<ul>
			<li><a href="#"><img src="./images/advert1.gif" alt="1" /></a></li>
			<li><a href="#"><img src="./images/advert4.gif" alt="4" /></a></li>
			<li><a href="#"><img src="./images/advert5.gif" alt="5" /></a></li>
		</ul>
		</div><!--END advertise-->

</div><!--END sidebar-->

</div>

<div id="footer">
	<div class="bottom">
	
		<div>
		<h4>Latest posts</h4>		<ul class="posts">
			<li>
			<h1>Jan</h1>
			<div class="listing">
			<p>7, 2010</p>
			<a href="#">Lorem ipsum dolor sit amet</a>
			</div>	
			</li>
				
			<li>
			<h1>Jan</h1>
			<div class="listing">
			<p>29, 2010</p>
			<a href="#">At vero eos et accusamus et iusto</a>
			</div>	
			</li>
				
			<li>
			<h1>Feb</h1>
			<div class="listing">
			<p>25, 2010</p>
			<a href="#">Cras lobortis mauris vel diam</a>
			</div>	
			</li>
				
			<li>
			<h1>Mar</h1>
			<div class="listing">
			<p>17, 2010</p>
			<a href="#">Duis aute irure dolor in reprehenderit</a>
			</div>	
			</li>
			</ul><!--END posts-->
		</div><!--END left-->
		
	
		<div>
		<h4>About us </h4>
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab <a href="#">illo inventore veritatis</a> et quasi architecto beatae vitae dicta sunt explicabo, nemo enim ipsam voluptatem quia voluptas sit asperna.</p>
			<br /><br />
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
		</div><!--END div-->
	
		
		<div>    	
		<h4>Newsletter</h4>
		<p>Our newsletter is awesome. Subscribe and get the latest updates. Spam free..</p>
		
			<form id="newsletter" name="newsletter" action="#" method="post">
				<input type="text" id="newsletter1" onfocus="if (this.value == 'Enter your name') {this.value = ''; }" onblur="if (this.value == ''){this.value = 'Enter your name'; }" value="Enter your name" />
				<input type="text" id="newsletter2" onfocus="if (this.value == 'Enter your email') {this.value = ''; }" onblur="if (this.value == ''){this.value = 'Enter your email'; }" value="Enter your email" class="required email" />
				<input name="Submit" type="submit" class="submit" value="Submit" />
			</form> 
			<!--END newsletter-->
		
			<ul class="socialize"> 
				<li class="toolTip" title="Flickr"><a href="#"><img src="./images/social-icon1.png" alt="1" /></a></li>
				<li class="toolTip" title="Reddit"><a href="#"><img src="./images/social-icon2.png" alt="2" /></a></li>
				<li class="toolTip" title="Wordpress"><a href="#"><img src="./images/social-icon3.png" alt="3" /></a></li>
				<li class="toolTip" title="Facebook"><a href="#"><img src="./images/social-icon4.png" alt="4" /></a></li>
				<li class="toolTip" title="Stumbleupon"><a href="#"><img src="./images/social-icon5.png" alt="5" /></a></li>
			</ul><!--END socialize ul-->  
				  
		</div><!--END div-->		
	</div><!--END bottom-->
</div><!--END bottom-box-->
  
<div class="footer">
	<div class="copyright">
		<ul>
			<li><a href="./index.html">Home</a></li>
			<li><a href="./about.html">About</a></li>
			<li><a href="./services.html">Services</a></li>
			<li><a href="./elements.html">Features</a></li>
			<li><a href="./portfolio.html">Portfolio</a></li>
			<li><a href="./blog.html">Blog</a></li>
			<li><a href="./contact.html">Contact</a></li>
		</ul>
	<p>© Copyright 2010 Your web site name. All rights reserved.</p>			
	</div><!--END copyright-->
	
</div><!--END footer-->   
 
</div><!--END wrapper--> 

<!-- Tooltip JavaScript File -->
<script type="text/javascript" src="./javascript/tooltip.js"></script>

</body>
</html>
